<template>
  <div class="filter_panel">
    <div class="chart_item title">
      <el-tabs v-model="activeName" class="title_tab" @tab-click="filterChange">
        <el-tab-pane
          v-for="(item, index) in tabsList"
          :key="index"
          :label="item.label"
          :name="item.name">
        </el-tab-pane>
      </el-tabs>
      <div class="search_item">
        <el-radio-group v-model="changeTabs" size="small" @change="handleChangeDateTime">
          <el-radio-button label="今日"></el-radio-button>
          <el-radio-button label="本周"></el-radio-button>
          <el-radio-button label="本月"></el-radio-button>
          <el-radio-button label="其他" class="hidden_radio"></el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="completionDate"
          @change="changeDate"
          type="daterange"
          size="small"
          align="right"
          unlink-panels
          :clearable=false
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterPanel',
  props: {
    tabsList: {
      type: Array,
      default: Array
    }
  },
  mounted() {
    this.filterChange()
  },
  data() {
    return {
      tabState: true,
      changeTabs: '本周',
      completionDate: [
        this.moment(window.serverTime).startOf('week').format('YYYY-MM-DD 00:00:00'),
        this.moment(window.serverTime).endOf('week').format('YYYY-MM-DD 23:59:59'),
      ],
      activeName: 'workgroup'
    }
  },
  computed: {
    todayMoment() {
      return [
        this.moment(window.serverTime).format('YYYY-MM-DD 00:00:00'),
        this.moment(window.serverTime).format('YYYY-MM-DD 23:59:59')
      ]
    },
    curWeekMoment() {
      return [
        this.moment(window.serverTime).startOf('week').format('YYYY-MM-DD 00:00:00'),
        this.moment(window.serverTime).endOf('week').format('YYYY-MM-DD 23:59:59'),
      ]
    },
    curMonthMoment() {
      return [
        this.moment(window.serverTime).startOf('month').format('YYYY-MM-DD 00:00:00'),
        this.moment(window.serverTime).endOf('month').format('YYYY-MM-DD 23:59:59'),
      ]
    }
  },
  methods: {
    // 切换今日/本周/本月
    handleChangeDateTime() {
      if (this.changeTabs === '今日') {
        this.completionDate = this.todayMoment
      } else if (this.changeTabs === '本周') {
        this.completionDate = this.curWeekMoment
      } else {
        this.completionDate = this.curMonthMoment
      }
      this.filterChange()
    },
    // 自由选择时间控件
    changeDate(list) {
      if (Array.isArray(list)) {
        const start = list[0]
        const end = list[1]
        let value = '其他'
        if (this.moment(start).isSame(this.todayMoment[0]) && this.moment(end).isSame(this.todayMoment[1])) {
          value = '今日'
        }
        if (this.moment(start).isSame(this.curWeekMoment[0]) && this.moment(end).isSame(this.curWeekMoment[1])) {
          value = '本周'
        }
        if (this.moment(start).isSame(this.curMonthMoment[0]) && this.moment(end).isSame(this.curMonthMoment[1])) {
          value = '本月'
        }
        this.changeTabs = value
        this.filterChange()
      }
    },
    // 筛选操作
    filterChange() {
      const filter = {tab: this.activeName, completionDate: this.completionDate}
      this.$emit('filterChange', filter)
    }
  }
}
</script>

<style lang="less">
  .filter_panel {
    .title {
      display: flex;
      height: 56px;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
      position: relative;
      z-index: 999;
      &::after{
        display: block;
        content: '';
        width: 100%;
        position: absolute;
        bottom: 1px;
        left: 0;
        border-bottom: 1px solid #eee;
      }
      .title_tab {
        display: flex;
        height: 100%;
        .el-tabs__header{
          margin: 0;
          height: 100%;
        }
        .el-tabs__nav-wrap{
          height: 100%;
          &::after{
            display: none;
          }
          .el-tabs__nav{
            height: 100%;
          }
          .el-tabs__nav-scroll{
            height: calc(100% - 1px);
          }
          .el-tabs__item{
            height: 100%;
            line-height: 56px;
          }
        }
      }
      .el-radio-group{
        margin-right: 15px;
        .el-radio-button{
          box-shadow: none!important;
        }
        .el-radio-button:first-child .el-radio-button__inner{
          border-radius: 0!important;
        }
        .hidden_radio{
          display: none;
        }
      }
    }
  }
</style>
